;
(function(_$) {

    const question = {
        init: function(selector, parentForm, dt) {
            const qus = {
                _selectorContainer: selector,
                _selectorContent: undefined,
                _selectorTextAnalysis: undefined,
                _ueContent: null,
                _ueTextAnalysis: null,
                _parentForm: parentForm,
                destroy: function() {
                    this._ueContent.destroy();
                    this._ueTextAnalysis.destroy();
                    this._ueContent = this._ueTextAnalysis = null;
                    _$(`#${this._selectorContent}`).remove();
                    _$(`#${this._selectorTextAnalysis}`).remove();
                    
                    _$(this._selectorContainer).empty();
                },
                getQuestion: function() {
                    const answers = _$.map(_$.makeArray(_$(`${this._selectorContainer} .question-fill-answer`)), function(ele) {
                        return _$(ele).val();
                    }).join();
                    return {
                        content: this._ueContent.getContent(),
                        answer: answers,
                        text_analysis: this._ueTextAnalysis.getContent(),
                        remark: _$(`${this._selectorContainer} #remark`).val(),
                    }
                },
                reset: function() {
                    console.warn("reset");
                    _$(`${this._selectorContainer} .option-list`).empty();
                    _$(`${this._selectorContainer} #remark`).val("");
                    this._ueContent.setContent("");
                    this._ueTextAnalysis.setContent("");
                },
            };
            _$(qus._selectorContainer).empty().append(getHtml(qus));
            bindListener(qus);
            initUE(qus);
            initData(qus, dt);
            return qus;
        },
    };
    
    function getHtml(qus) {
        const d = new Date();
        qus._selectorContent = `question-content-${d.getTime()}`;
        qus._selectorTextAnalysis = `question-text-analysis-${d.getTime()}`;
    
        const htmlStr = `<div class="form-group">
            <label for="analysis" class="col-sm-2 control-label">题干</label>
            <div class="col-sm-10">
                <script type="text/plain" id="${qus._selectorContent}"></script>
            </div>
        </div>
        <div class="form-group">
            <label for="analysis" class="col-sm-2 control-label">答案</label>
            <div class="col-sm-10">
                <button type="button" class="btn btn-primary btn-sm btn-add-answer">添加</button>
                <button type="button" class="btn btn-primary btn-sm btn-remove-answer">删除</button>
                <ul class="option-list"></ul>
            </div>
        </div>
        <div class="form-group">
            <label for="analysis" class="col-sm-2 control-label">解析</label>
            <div class="col-sm-10">
                <script type="text/plain" id="${qus._selectorTextAnalysis}"></script>
            </div>
        </div>
        <div class="form-group">
            <label for="remark" class="col-sm-2 control-label">备注</label>
            <div class="col-sm-10">
                <textarea class="form-control" name="remark" id="remark"></textarea>
            </div>
        </div>`;
        return htmlStr;
    }
    
    function bindListener(qus) {
        _$(`${qus._selectorContainer} .btn-add-answer`).click(function () {
            const l = _$(`${qus._selectorContainer} .option-item`).length + 1;
            _$(`${qus._selectorContainer} .option-list`).append(`
                <li class="option-item">
                    <div class="input-group" style="width: 100%;">
                        <span class="input-group-addon">${l}</span>
                        <input type="text" class="form-control question-fill-answer" placeholder="请输入答案，如果存在多个答案用|分割,例如hello|word">
                    </div>
                </li>`
            );
        });
    
        _$(`${qus._selectorContainer} .btn-remove-answer`).click(function () {
            _$(`${qus._selectorContainer} .option-item:last-child`).remove();
        });
    }
    
    function initUE(qus) {
        console.warn(qus._selectorContent);
        console.warn(qus._selectorTextAnalysis);
        qus._ueContent = window.UE.getEditor(qus._selectorContent, {
            autoHeight: false
        });
        qus._ueTextAnalysis = window.UE.getEditor(qus._selectorTextAnalysis, {
            autoHeight: false
        });
    }

    function initData(qus, dt) {
        console.warn(qus, dt);
        if (!dt) {
            return;
        }
        qus._ueContent.ready(function() {
            qus._ueContent.setContent(dt.content.content);
        });  
        qus._ueTextAnalysis.ready(function() {
            qus._ueTextAnalysis.setContent(dt.content.text_analysis);
        });
        _$(`${qus._selectorContainer} #remark`).val(dt.content.remark);
        const htmlStr = dt.content.answer.split(",").map((item, index) => {
            return `<li class="option-item">
                        <div class="input-group" style="width: 100%;">
                            <span class="input-group-addon">${index + 1}</span>
                            <input type="text" class="form-control question-fill-answer" placeholder="请输入答案，如果存在多个答案用|分割,例如hello|word" value="${item}">
                        </div>
                    </li>`;
        }).join("");
        _$(`${qus._selectorContainer} .option-list`).append(htmlStr);
    }

    _$.fn.extend({
        questionFill: question,
    });
})($);